<template>
	<!-- 怡家版本 -->
	<view>
		<!-- 头部搜索框 -->
		<search :prefix="$t('public.pleaseScan')" :placeholder="$t('homepage.FabricReport.barcode')" />
		<!-- 已选择工序 -->
		<zy-group :title="$t('homepage.FabricReport.selectedProcess')">
			<zy-table ref="zyTable" :headList="setList" :dataList="setData" :loading="setLoading" border></zy-table>
		</zy-group>
		<!-- 详情 -->
		<zy-group :title="$t('public.detail')">
			<scroll-view scroll-y="true" style="height:30vh">
				<zy-forms :model="formData" border labelWidth="160">
					<zy-form-item :label="$t('homepage.FabricReport.volumeNo')+$t('public.colon')"><text
							class="formText">{{formData.batchNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.productionNo')+$t('public.colon')"><text
							class="formText">{{formData.productionNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.packageName')+$t('public.colon')"><text
							class="formText">{{formData.packageName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.materialCode')+$t('public.colon')"><text
							class="formText">{{formData.materialCode|| $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.materialName')+$t('public.colon')"><text
							class="formText">{{formData.materialName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.materialSpec')+$t('public.colon')"><text
							class="formText">{{formData.materialSpec || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.clothWidth')+$t('public.colon')"><text
							class="formText">{{formData.clothWidth || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('public.color')+$t('public.colon')"><text
							class="formText">{{formData.color || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('public.pattern')+$t('public.colon')"><text
							class="formText">{{formData.pattern || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.meters')+$t('public.colon')"><text
							class="formText">{{formData.meters || $t('public.null')}}</text>
					</zy-form-item>
				</zy-forms>
			</scroll-view>
		</zy-group>
		<!-- 数据录入 -->
		<zy-group :title="$t('homepage.FabricReport.dataEnter')" :btnList="btnList"
			:style="`marginBottom:${marginBottom}`">
			<zy-forms :model="inputData" border :rules="rules" labelWidth="120">
				<zy-form-item :label="$t('public.meters')+$t('public.colon')" required>
					<input type="text" v-model="inputData.meters" @keyboardheightchange="keyboardheightchange"
						:placeholder="$t('public.pleaseInput')+$t('public.meters')" />
				</zy-form-item>
				<zy-form-item :label="$t('homepage.FabricReport.machineNo')+$t('public.colon')">
					<input type="text" v-model="inputData.no" @keyboardheightchange="keyboardheightchange"
						:placeholder="$t('public.pleaseInput')+$t('homepage.FabricReport.machineNo')" />
				</zy-form-item>
				<!-- <zy-form-item :label="$t('homepage.FabricReport.lossRate')+$t('public.colon')">
					<picker mode="selector" @change="rateChange" :value="rateIndex" :range="rateColumn"
						:range-key="'label'">
						<view class="formItem" @click="rateBtn">
							<input class="formInput" v-model="inputData.lossRate" disabled
								:placeholder="$t('public.pleaseInput')+$t('homepage.FabricReport.lossRate')" />
							<i class="iconfont icon-xiangxia1"></i>
						</view>
					</picker>
				</zy-form-item> -->
				<zy-form-item :label="$t('homepage.FabricReport.remarks')+$t('public.colon')">
					<input type="text" v-model="inputData.remarks" @keyboardheightchange="keyboardheightchange"
						:placeholder="$t('public.pleaseInput')+$t('homepage.FabricReport.remarks')" />
				</zy-form-item>
			</zy-forms>
		</zy-group>
		<!-- 数据录入添加弹窗 -->
		<zy-popup ref="addPopup" type='dialog' :title="$t('public.materialCode')" @confirm="submit"
			:closeOnClickOverlay="false">
			<search :placeholder="$t('homepage.FabricReport.barcode')" :fixed="false" />
			<zy-table ref="zyTable" :headList="headList" :dataList="addData" border></zy-table>
		</zy-popup>
		<!-- 数据录入明细弹窗 -->
		<zy-popup ref="detailPopup" :title="$t('homepage.FabricReport.addedDetail')">
			<zy-table ref="zyTable" :headList="headList" :dataList="detailData" border></zy-table>
		</zy-popup>
		<!-- 底部按钮 -->
		<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submitBtn"
			@leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>

<script>
	import {
		getEntityByField,
		saveMaterialReport
	} from "@/api/homepage.js"
	export default {
		data() {
			return {
				type: 0,
				//表格表头
				setList: [{
						name: this.$t('public.procedureCode'),
						key: 'procedureCode',
					},
					{
						name: this.$t('public.procedureName'),
						key: 'procedureName',
					}
				],
				setData: [], //表格数据
				setLoading: true,
				//详情表单字段
				formData: {
					productionNo: '',
					styleCode: '',
					styleName: '',
					cuttingSheetNo: '',
					partName: '',
					color: '',
					size: '',
					bindingNo: '',
					perBindNum: '',
					remarks: '',
				},
				// 数据录入表单数据
				inputData: {
					meters: '',
					// no: '',
					lossRate: '',
					remarks: ''
				},
				//form校验
				rules: {
					meters: {
						required: true,
						message: this.$t('public.pleaseInput'),
						trigger: ['blur', 'change']
					},
					no: {
						required: true,
						message: this.$t('public.pleaseInput'),
						trigger: ['blur', 'change']
					},
				},
				//损耗率下拉框数据
				rateIndex: 0,
				rateColumn: [],
				// 数据录入按钮
				btnList: [{
					type: "primary",
					text: this.$t('homepage.FabricReport.add'),
					handle: this.addHandle,
				}, {
					type: "success",
					text: this.$t('homepage.FabricReport.detail'),
					handle: this.detailHandle,
				}],
				// 数据录入添加/明细表格表头
				headList: [{
					name: this.$t('public.batchNo'),
					key: 'batchNo',
				}, {
					name: this.$t('public.packageName'),
					key: 'packageName',
				}, {
					name: this.$t('public.materialName'),
					key: 'materialName',
				}, {
					name: this.$t('public.materialSpec'),
					key: 'materialSpec',
				}, {
					name: this.$t('public.clothWidth'),
					key: 'clothWidth',
				}, {
					name: this.$t('public.color'),
					key: 'color',
				}, {
					name: this.$t('public.pattern'),
					key: 'pattern',
				}, {
					name: this.$t('public.meters'),
					key: 'meters',
					edit: true,
					type: 'number'
				}],
				addData: [],
				detailData: [],
				marginBottom: "0px"
			}
		},
		mounted() {
			this.getList()
		},
		onLoad() {
			this.getscancodedate()
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedate')
			uni.$off('scancodepopdate')
		},
		methods: {
			keyboardheightchange() {
				if (this.marginBottom == "0px") {
					this.marginBottom = "150px"
				} else {
					this.marginBottom = "0px"
				}
			},
			//主页获取扫描事件
			getscancodedate() {
				// 移除监听弹窗事件
				uni.$off('scancodepopdate')
				//PDA扫描主页指示单号
				var _this = this
				_this.type = 0
				uni.$on('scancodedate', function(data) {
					_this.searchList(data.code)
				})
			},
			//“弹窗物料编码”获取扫描事件
			getscancodepopdate() {
				// 移除监听事件
				uni.$off('scancodedate')
				//PDA扫描弹窗事件
				var _this = this
				_this.type = 1
				uni.$on('scancodepopdate', function(data) {
					_this.searchList(data.code)
				})
			},
			//获取已选择工序表格数据
			getList() {
				this.setData = []
				let arr = uni.getStorageSync("procedureData")
				arr.forEach((item, index) => {
					if (item.switch) {
						this.setData.push(item)
					}
				})
			},
			//搜索内容查询
			searchList(e) {
				console.log(e)
				this.addData = []
				getEntityByField({
					fieldName: 'barcode',
					fieldValue: e
				}).then((res) => {
					if (res.code == 0) {
						if (this.type == 0) {
							this.formData = res.data
						} else {
							this.addData.push(res.data)
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 3000
							})
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uuni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			// 数控录入添加事件
			addHandle() {
				this.$refs.addPopup.open()
				this.getscancodepopdate()
			},
			// 数控录入添加弹窗提交
			submit() {
				this.$refs.addPopup.close()
			},
			// 数控录入明细事件
			detailHandle() {
				if (this.addData.length == 0) {
					this.detailData = []
				} else {
					setTimeout(() => {
						this.detailData.push(this.addData[0])
					}, 500)
				}
				this.$refs.detailPopup.open()
			},
			// 获取损耗率的下拉框数据
			rateBtn() {
				// setTimeout(() => {
				let obj = [{
					label: "0.06",
					value: "0.06"
				}, {
					label: "0.02",
					value: "0.02"
				}]
				this.rateColumn = obj
				console.log(this.rateColumn)
				// }, 1000)
			},
			//损耗率选择器完成事件
			rateChange(e) {
				this.rateColumn.forEach((item, index) => {
					if (e.detail.value == index) {
						this.rateValue = item.value
						this.inputData.lossRate = item.label
					}
				})
			},
			// 重置事件
			resetBtn() {
				uni.redirectTo({
					url: "/pages/HomePage/FabricReport/index"
				})
			},
			// 提交事件
			submitBtn() {
				if (!this.inputData.meters) {
					uni.showToast({
						title: this.$t('public.pleaseInput') + this.$t('public.meters'),
						icon: "none",
						duration: 3000
					})
				} else {
					saveMaterialReport({
						productionTaskId: this.formData.productionTaskId, //扫码获得明细中生产单id
						materialRecordId: this.formData.id, //扫码获得明细中id
						procedureId: this.setData[0].procedureId, //工序id
						procedureCode: this.setData[0].procedureCode, //工序号
						procedureName: this.setData[0].procedureName, //工序名
						meters: this.inputData.meters, //米数
						machineNo: this.inputData.no, //机器号
						// lossRate: this.inputData.lossRate, //损耗率
						remarks: this.inputData.remarks, //备注
						volumes: "1", //卷数（默认为1）
						subMaterialRecordIds: JSON.stringify(this.detailData) //子卷的id数组，逗号隔开
					}).then((res) => {
						if (res.code == 0) {
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 3000
							})
							this.resetBtn()
						} else {
							uni.showToast({
								title: res.message,
								icon: "none",
								duration: 3000
							})
						}
					}).catch((res) => {
						console.log(res)
						uuni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formText {
		color: #999;
	}

	.formItem {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		display: flex;
		border: 1px solid #e9e9e9;
		border-radius: 10rpx;
		background-color: #f5f5f5;
	}
</style>